<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>地图</title>
    <style>
        #map {
            height: 800px;
            width: 100%;
            margin: 0 auto;
        }
    </style>
    <script
            src="https://mapapi.cloud.huawei.com/mapjs/v1/api/js?callback=initMap&key=DAEDAJjAM5PVXcI8n7QLiy3dWhEpkDGUTph7DqsQP1pdLK280J%2FiJyUm8eIGt0%2FgF3E%2B0GJLqm1qPiy2COxIfiKeW9wSwNdvQFbEPA%3D%3D"></script>
</head>

<body>
<script>
        var directionsService;
        var directionsRenderer;
        var markerOrigin, markerDestination;
        // 创建路径规划请求体
        var DirectionsRequest = {};
        let param = getLocation()
        DirectionsRequest.origin = {
            lat: parseFloat(param.olat),
            lng: parseFloat(param.olng)
        };
        DirectionsRequest.destination = {
            lat: parseFloat(param.dlat),
            lng: parseFloat(param.dlng)
        };
        //根据经纬度和地球周长获取缩放级别
        const zoomLevel = calculateZoomLevel(DirectionsRequest.origin.lat, DirectionsRequest.origin.lng, DirectionsRequest.destination.lat,  DirectionsRequest.destination.lng);
        console.log(zoomLevel);
        function initMap() {
            directionsService = new HWMapJsSDK.HWDirectionsService();
            directionsRenderer = new HWMapJsSDK.HWDirectionsRenderer();
            var mapOptions = {};
            // 设置地图中心点坐标
            // mapOptions.center = { lat: (param.olat+param.dlat) / 2, lng: (param.olng+param.dlng) / 2 };
            mapOptions.center = { lat: (DirectionsRequest.origin.lat + DirectionsRequest.destination.lat) / 2, lng: (DirectionsRequest.origin.lng + DirectionsRequest.destination.lng) / 2 };
            // 设置地图初始化缩放级别
            mapOptions.zoom = zoomLevel;
            // 设置地图语言
            mapOptions.language = 'CHI';
            // 设置地图加载时使用的瓦片类型，支持vector（矢量）或raster（栅格）
            mapOptions.sourceType = 'raster';
            //设置缩放按钮
            mapOptions.zoomControl = true;
            //设置我的位置
            mapOptions.locationControl = true
            // 设置AT
            // mapOptions.authOptions = { accessToken: 'DAEDALKrA5n+WvU62NC2DZFGGCvcOZv9u331BydLrPrDTdivgZdg3g8xHFhizQDhSasJgarMuyIqb1i7SggpC8MBxAQpi2wCEvRPuw==' }
            // 创建地图对象
            var map = new HWMapJsSDK.HWMap(document.getElementById('map'), mapOptions);
            //    initPosition(map)
            markerOrigin = new HWMapJsSDK.HWMarker({
                position: DirectionsRequest.origin,
                label: '我'
            });

            markerDestination = new HWMapJsSDK.HWMarker({
                position: DirectionsRequest.destination,
                label: '买家'
            });

            markerOrigin.setMap(map);
            markerDestination.setMap(map);
            // 调用路径规划接口
            directionsService.routeDriving(DirectionsRequest, callback);
            directionsRenderer.setMap(map);
            // 通过回调函数获取路径规划结果
            function callback(DirectionsResult, DirectionsStatus) {
                if (DirectionsStatus == '0') {
                    // 通过HWDirectionsRenderer对象渲染路径
                    directionsRenderer.setDirections(DirectionsResult);
                }
            }

        }
        //根据经纬度计算缩放级别
        function calculateZoomLevel(lat1, lng1, lat2, lng2) {
            const lat=180
            const lng=360
            const zoomLat = Math.log2(lat/Math.abs(lat2 - lat1));
            const zoomLng = Math.log2(lng/Math.abs(lng2 - lng1));
            let zoom = Math.min(zoomLat,zoomLng)
            return Math.ceil(zoom);
            }
        //通过url获取经纬度信息
        function getLocation() {
            let params = window.location.search
            let returl = new Object();
            if (params.indexOf("?") != -1) {
                let queryString = params.substr(1);
                let queryParams = queryString.split("&");
                for (let i = 0; i < queryParams.length; i++) {
                    let [key, value] = queryParams[i].split("=");
                    returl[key] = decodeURI(value);
                }
            }
            console.log(returl)
            return returl
        }
    </script>
<div id="map"></div>
</body>

</html>